<template>
    <div class="container">
        <statistics-header header-title="确 诊 和 无 症 状 人 员 数 据 库"></statistics-header>
        <statistics-bar  @getType="getType" bar-type="confirmedAsymptomatic" ref="statisticsBar"></statistics-bar>
        <div class="report-content">
            <div class="search-group">
                <div class="left-content">
                    <div class="data-title">数据库信息</div>
                    <dlq-search @search="search" search-type="1" search-more="searchMore" :area-name="areaName"></dlq-search>
                </div>
<!--                <div class="record-num"><span style="color: red;">{{totalnum}}</span>条数据</div>-->
            </div>
            <Row class="main-table">
                <vxe-toolbar export custom></vxe-toolbar>
                <vxe-table
                        border
                        resizable
                        highlight-hover-row
                        height="700"
                        size="medium"
                        show-overflow="tooltip"
                        :loading="tableLoading"
                        align="center"
                        header-align="center"
                        :sort-config="{trigger: 'cell'}"
                        :data="tableData"
                        :checkbox-config="{checkField: 'checked'}">
                    <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                    <vxe-table-column :field="item.key" :title="item.title" :width="item.width" :visible="item.visible"
                                      v-for="(item,index) in tableColumns" :key="index">
                    </vxe-table-column>
                    <!--                    <vxe-table-column field="place_type_name" title="场所类别" width="150"></vxe-table-column>-->
                </vxe-table>
            </Row>
            <br>
            <Row type="flex" justify="center">
                <Page show-sizer :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                      @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
            </Row>
        </div>
    </div>
</template>
<script>
import {
  asymptomaticList,
  updateqzry,
  date2str
} from '@/api/statistics-data-list'
import StatisticsBar from '@/components/statistics-bar'
import StatisticsHeader from '@/components/statistics-header'
import DlqSearch from '@/components/search'
// import areaJSON from '@/libs/area'
export default {
  components: { StatisticsHeader, StatisticsBar, DlqSearch },
  data () {
    return {
      case_type: [],
      clinical_severity: [],
      drawer: false,
      areaName: '',
      totalnum: 0,
      typeNumObj: [
      ],
      searchObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 50,
        totalRecord: 0
      },
      tableLoading: false,
      tableColumns: [
        {
          title: '姓名',
          width: 150,
          tooltip: true,
          key: 'name',
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'Id_no',
          tooltip: true,
          width: 260,
          align: 'center',
          visible: false
        },
        {
          title: '护照号',
          key: 'passport_no',
          tooltip: true,
          width: 260,
          align: 'center',
          visible: false
        },
        {
          title: '性别',
          key: 'sex',
          tooltip: true,
          width: 70,
          align: 'center',
          visible: false
        },
        // {
        //   title: '工作单位',
        //   key: 'work_unit',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        {
          title: '手机号码',
          key: 'tel',
          tooltip: true,
          width: 160,
          align: 'center',
          visible: false
        },
        {
          title: '所属国籍',
          key: 'nationality',
          tooltip: true,
          width: 150,
          align: 'center'
        },
        {
          title: '所属省',
          key: 'province',
          tooltip: true,
          width: 160,
          align: 'center'
        },
        {
          title: '所属市',
          key: 'city',
          tooltip: true,
          width: 160,
          align: 'center'
        },
        {
          title: '所属区县',
          key: 'county',
          tooltip: true,
          width: 150,
          align: 'center'
        },
        {
          title: '人群分类',
          key: 'pop_type',
          tooltip: true,
          width: 120,
          align: 'center'
        },
        {
          title: '病例分类',
          key: 'case_type',
          tooltip: true,
          width: 120,
          align: 'center'
        },
        {
          title: '发病日期',
          key: 'onset_day',
          tooltip: true,
          width: 120,
          align: 'center'
        },
        {
          title: '诊断时间',
          key: 'diagnostic_time',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '收治医院',
          key: 'admitted_hospital',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '入院时间',
          key: 'admission_time',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '临床严重程度',
          key: 'clinical_severity',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '是否输入病例',
          key: 'Input_case',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '入境前居住或旅行的国家或地区',
          key: 'before_entry',
          tooltip: true,
          width: 260,
          align: 'center'
        },
        {
          title: '治愈出院日期',
          key: 'cure_date',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '解除隔离日期',
          key: 'Isolation_release_date',
          tooltip: true,
          width: 200,
          align: 'center'
        }
      ],
      tableData: [],
      areaList: [
        {
          'name': '集中隔离',
          'id': '集中隔离'
        },
        {
          'name': '居家隔离',
          'id': '居家隔离'
        },
        {
          'name': '企业隔离',
          'id': '企业隔离'
        }
      ],
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      typeName: '',
      county: '',
      keyName: ''
    }
  },
  computed: {},
  mounted () {
    // this.init()
    if (this.$route.query && this.$route.query.areaName) {
      this.areaName = this.$route.query.areaName
      this.$refs.statisticsBar.confirmedAsymptomaticAction(this.$route.query.areaName)
    } else if (this.$route.query && this.$route.query.type) {
      this.typeName = this.$route.query.type
      this.init()
    } else {
      this.init()
    }
  },
  methods: {
    xiugai (row) {
      this.id = row.id
      console.log(row, '数据')
      /* this.modal = true */
      this.modal1 = true
      this.name = row.name// 姓名
      /*   this.Id_no = ''
      this.passport_no = '' */
      /* this.sex = ''
      this.tel = '' */
      this.nationality = row.nationality// 所属国籍
      this.province = row.province// 所属省
      this.city = row.city// 所属市
      this.countya = row.county// 所属区县
      this.pop_type = row.pop_type// 人群分类
      this.case_typea = row.case_type// 病例分类
      this.onset_day = row.onset_day// 发病日期
      this.diagnostic_time = row.diagnostic_time// 诊断时间
      this.admitted_hospital = row.admitted_hospital// 收治医院
      this.admission_time = row.admission_time// 入院时间
      this.clinical_severitya = row.clinical_severity// 临床严重程度
      this.Input_case = row.Input_case// 是否输入性病例
      this.before_entry = row.before_entry// 治愈出院时间
      this.cure_date = row.cure_date// 接触隔离时间
      this.Isolation_release_date = row.Isolation_release_date// 入境前居住或旅行的国家或地区
    },
    cancel () {
      this.name = ''// 清空弹框的输入框默认值
      this.Id_no = ''
      this.passport_no = ''
      this.sex = ''
      this.tel = ''
      this.nationality = ''
      this.province = ''
      this.city = ''
      this.countya = ''
      this.pop_type = ''
      this.case_typea = ''
      this.onset_day = ''
      this.diagnostic_time = ''
      this.admitted_hospital = ''
      this.admission_time = ''
      this.clinical_severitya = ''
      this.Input_case = ''
      this.before_entry = ''
      this.cure_date = ''
      this.Isolation_release_date = ''
    },
    ok () {
      this.onset_day = date2str(this.onset_day)
      this.diagnostic_time = date2str(this.diagnostic_time)
      this.admission_time = date2str(this.admission_time)
      this.cure_date = date2str(this.cure_date)
      this.Isolation_release_date = date2str(this.Isolation_release_date)
      console.log(this.onset_day, '日期')
      let data = {
        id: this.id,
        name: this.name,
        Id_no: this.Id_no,
        passport_no: this.passport_no,
        sex: this.sex,
        tel: this.tel,
        nationality: this.nationality,
        province: this.province,
        city: this.city,
        county: this.countya,
        pop_type: this.pop_type,
        case_type: this.case_typea,
        onset_day: this.onset_day,
        diagnostic_time: this.diagnostic_time,
        admitted_hospital: this.admitted_hospital,
        admission_time: this.admission_time,
        clinical_severity: this.clinical_severitya,
        Input_case: this.Input_case,
        before_entry: this.before_entry,
        cure_date: this.cure_date,
        Isolation_release_date: this.Isolation_release_date
      }
      updateqzry(data).then(ret => {
        if (ret.data.errmsg === 'success') {
          this.$Message.success('修改成功')
          this.init()
        }
      })
    },
    drawerSearch () {
      console.log(this.case_type)
      this.init({ case_type: this.case_type.toString(), clinical_severity: this.clinical_severity.toString() })
    },
    // search (value) {
    //   this.pageObj.pageNo = 1
    //   this.init(value)
    // },
    search (value) {
      console.log(value, '888')
      this.pageObj.pageNo = 1
      this.$refs.statisticsBar.confirmedAsymptomaticAction(value.county)
      if (value.county === '全市') {
        this.county = ''
      } else {
        this.county = value.county
        this.keyName = value.key
      }
      this.init()
      if (value.searchMore === 'searchMore') {
        console.log('1111')
        this.drawer = true
      }
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    searchAction () {},
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        ...data
      }
      if (this.county)obj.county = this.county
      if (this.keyName)obj.key = this.keyName
      if (this.typeName)obj.type = this.typeName
      this.tableLoading = true
      asymptomaticList(obj).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.pageObj.totalRecord = data.data.totalRecord
          this.totalnum = data.data.totalRecord
          for (let i = 0; i < data.data.results.length; i++) {
            data.data.results[i].samplingDate = this.getDate(data.data.results[i].sampling_date)
            data.data.results[i].imp_date = this.getDate(data.data.results[i].imp_date)
          }
          this.tableData = data.data.results
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    // 转换年月日方法
    getDate (str) {
      var oDate = new Date(str)
      var oYear = oDate.getFullYear()
      var oMonth = oDate.getMonth() + 1
      var oDay = oDate.getDate()
      // var oHour = oDate.getHours()
      // var oMin = oDate.getMinutes()
      // var oSec = oDate.getSeconds()
      var oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
      // + ' ' + this.getzf(oHour) + ':' + this.getzf(oMin) + ':' + this.getzf(oSec)// 最后拼接时间
      return oTime
    },
    // 补0操作
    getzf (num) {
      if (parseInt(num) < 10) {
        num = '0' + num
      }
      return num
    },
    getType (object) {
      this.typeName = object.type
      this.pageObj.pageNo = 1
      this.init()
    }
  }
}
</script>

<style scoped type="less">
    .container {
        margin-bottom: 50px;
    }
    .report-content {
        padding: 0 10px;
        height: auto;
    }
    .search-group {
        /*padding: 10px 0;*/
        border-bottom: 1px solid #efefef;
    }
    .sub-title {
        /*border-left: 7px solid darkred;*/
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-title span {
        font-size: 30px;
        font-weight: 800;
        color: #fff;
        margin: 0 3px;
    }
    .precent-group {
        display: flex;
        align-items: center;
    }
    .precent-group>.item {
        width: 180px;
        padding: 0 10px;
    }
    .precent-group>.item>.text {
        width: 100%;
    }
    .demo-drawer-footer {
        margin-top: 20px;
    }
    .inner-frame>.ivu-row {
        margin-bottom: 10px;
    }
    .ivu-form-item{
        margin-bottom: 10px;
    }
    .main-table {
        margin-top: -45px;
    }
    .data-title {
        border-left: 6px solid darkred;
        padding-left: 7px;
        margin-right: 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
    }
    .search-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }
    .left-content {
        display: flex;
        align-items: center;
        z-index: 2;
    }
    .record-num {
        margin-right: 140px;
    }
    .ivu-checkbox-border{
        margin-bottom: 10px;
    }
</style>
